<template>
  <!-- 页面标题区 -->
  <a-row  class="page-content-header">
    <span class="title">{{routeName}}</span>
  </a-row>
  <a-row class="page-content-body">
    <div class="container">
      <div class="image-div" v-for="img in images" :class="{'selected':img.selected}" >
        <div :class="{'angle_mark':img.selected}" v-if="img.selected">
          <span><check-outlined /></span>
        </div>
        <img class="image" :key="img.id" :src="img.url" @click="selectImage(img.id)"/>
      </div>
    </div>
  </a-row>
  <a-row>
    <div style="margin-top:20px;margin-left: 6%">
      <a-button type="primary" size="small" @click="setImage" style="font-size: 12px;">设 置</a-button>
    </div>
  </a-row>
</template>

<script setup>
import { computed,ref,reactive } from 'vue';
import { useRoute } from 'vue-router';
import { CheckOutlined } from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
const routeName = computed(() => route.meta.title);// 计算属性，获取当前路由的元数据中的标题

//定义数据源
const images =reactive( [
  { id: 1, selected: false, url: "https://cdn9-banquan.ituchong.com/weili/ml/333579544320016398.jpeg" },
  { id: 2, selected: false, url: "https://cdn3-banquan.ituchong.com/weili/ml/1434115693633470506.jpeg" },
  { id: 3, selected: false, url: "https://cdn6-banquan.ituchong.com/weili/ml/944992886503374924.jpeg" },
  { id: 4, selected: false, url: "https://p3-ug-imc.byteimg.com/img/tos-cn-i-gflu06s87d/61165417942f4c01be365813ebd7a43b~tplv-gflu06s87d-image.jpeg" },
  { id: 5, selected: false, url: "https://cdn6-banquan.ituchong.com/weili/ml/1823791573838725131.jpeg" },
])
//选择图片
const selectImage = (id) => {
  console.log(id);
  images.forEach(img => {
    img.selected = img.id === id;
  })
}
//设置图片
const setImage = () => {
  let count = 0;
  images.forEach(img => {
    if (img.selected == true) {
      count++;
      //换背景函数
    }
  })
  console.log(count)
  if (count === 0) {
    console.log("失败")
    notification.open({
      message: '修改失败',
      description: '请选择图片!',
      style: {color:'red'},
    })
  }
  else if (count === 1) {
    console.log("成功")
    notification.open({
      message: '修改成功',
      description: '已修改桌面背景!',
      style: {color:'rgb(41, 159, 37)'},
    })
  }
  else {notification.open({
    message: '数据错误',
    description: '可能出Bug了!',
    style: {color:'red'},
  })}
}


</script>

<style lang="less" scoped>
.page-content-header{
  padding: 2% 0% 0% 5%;
  margin:0
}
.title {
  display: block;
  float: left;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.page-content-body{
  height: 45%;
  padding-top: 2%;
  .container{
    display: flex;
    flex-wrap: wrap;
    padding-left: 5%;
    .image-div{
      width: 160px;
      height:100px;
      padding: 1px;
      margin-left: 5px;

    }
    .image{
      width: 100%;
      height: 100%;
      border:2px solid rgb(221, 221, 221);
    }
  }
}
.selected {
  border: 3px solid rgb(54, 178, 255);
  position: relative;
  overflow:hidden;/*隐藏溢出*/
  .angle_mark{
  position: absolute;
  bottom: -72px;
  right: -72px;
  background-color: rgb(54, 178, 255);
  width: 100px;
  height: 100px;
  transform: rotate(45deg);

  // 角标文字
  span {
      position: absolute;
      display: inline-block;
      color: rgb(255, 255, 255);
      width: 100%;
      bottom: 25px;
      left: -15px;
      text-align: center;
      transform: rotate(-22.5deg);
    }
  }
}
</style>
